<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入宠物编号" id="num">
    <input type="button" value="查询" onclick="showOwner()">
    <div id="mydiv"></div>
    <script>
        var pets = [
            {
                id:1,name:"大黄",owner:"大庆"
            },
            {
                id:2,name:"喵喵",owner:"谈伟"
            },
            {
                id:3,name:"小白",owner:"永强"
            }
        ];

        var owners=[
            {
                name:"永强",location:"北京",age:23
            },
            {
                name:"大庆",location:"江苏南京",age:20
            },
            {
                name:"谈伟",location:"上海",age:22
            }
            
        ];

        function createPromise(username){
           return new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(username)
                },2000);
            });
          
        }

       async function showOwner(){
            var num=document.getElementById("num").value*1;
            let data=pets[num-1];
            if(data){
               let owner=await createPromise(data.owner);
               for(var i=0;i<owners.length;i++){
                    if(owner==owners[i].name){
                        document.getElementById("mydiv").innerHTML=`主人是${owner},地址是${owners[i].location},年龄${owners[i].age}`;
                    }
               }
            }else{
                document.getElementById("mydiv").innerHTML="该编号不存在";
            }

        }
    </script>
</body>

</html>